import { defineStore } from "pinia";
import { getItem, setItem } from '@/utils/storage.ts'
import { MAIN_COLOR, DEFAULT_COLOR, PROJECTNAME } from '@/constant/index.ts'
import variables from '@/styles/variables.module.scss'
import { generateColors } from '@/utils/theme'

export const useThemeStore = defineStore('theme',{
    state: () => {
        return{
            mainColor: DEFAULT_COLOR,
            variables
        }
    },
    getters:{
        cssVar: (state) => {
            return {
                // 使用state中的variales，要不然getters计算属性 检测不到依赖的值变化，无法进行重新计算
                // ...variables,
                ...state.variables,
                // 根据主色值 生成色值表
                ...generateColors(getItem(`${PROJECTNAME}__theme`)?getItem(`${PROJECTNAME}__theme`).mainColor:null)
            }
        },
    },
    actions:{
        /**
         * 设置主题色
         */
        setMainColor( newColor ) {
            this.mainColor = newColor
            this.variables.menuBg = newColor
        }
    },
    persist:{
        paths:['mainColor']
    }
})
